<script setup lang="ts">
import { putOrderAPI } from '@/api/order';
import { useAuthStore } from '@/stores/auth';
import { Message } from '@arco-design/web-vue';
import { storeToRefs } from 'pinia';
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const { userInfo } = storeToRefs(useAuthStore())
const { getUserInfo } = useAuthStore()

const query = route.query
// 支付提示modal
const isTipsModal = ref(false)
// 是否支付
const isPaid = ref(false)

const handleTipsModalOk = async () => {
  const res:any = await putOrderAPI(Number(query.id))
  await getUserInfo()
  console.log(res)
  if (!res.id) {
    Message.error('您的余额不足！')
  } else {
    Message.success('支付成功！感谢您的购买')
  }

  isPaid.value = true
}

const handleShowModal = () => {
  if ((userInfo.value.balance! - Number(query.total)) < 0) {
    Message.error('您的余额不足！')
    return
  }
  isTipsModal.value = true
}
</script>

<template>
  <div class="w-1280px mx-auto  text-4">
    <StepsBar title="提交订单" :current="isPaid ? 3 : 2" />

    <div class="bg-#f9f9f9 mt-4 p-10 flex">
      <div class="p-14 bg-#fff flex gap-15 w-full">
        <div class="">
          <icon-check class="text-#83C44E text-100px border-3 border-solid border-#83C44E rounded-full p-3" />
        </div>
        <div class="w-full">
          <div class="text-lg flex flex-col gap-2">
            <p class="text-2xl">{{ isPaid ? '支付成功！感谢您的购买 ~' : '订单提交成功！去付款咯 ~' }}</p>
            <p class="text-gray-7 pb-6 border-b border-b-solid border-b-gray-2">
              {{ isPaid ? '已付金额' : '应付总额' }}: <span class="text-warning text-2xl">{{ query.total }}</span> <span class="text-warning">元</span>
            </p>
            <div class="text-gray-7 flex mt-4">
              <span class="w-100px">订单号：</span>
              <span class="text-warning">{{ String(query.id).padStart(2,'0') }}</span>
            </div>
            <div class="text-gray-7 flex">
              <span class="w-100px">收货地址：</span>
              <span class="">{{ query.address }}</span>
            </div>
            <div class="text-gray-7 flex">
              <span class="w-100px">联系人：</span>
              <span class="">{{ query.username }}</span>
            </div>
            <div class="text-gray-7 flex">
              <span class="w-100px">联系方式：</span>
              <span class="">{{query.phone}}</span>
            </div>
            <div class="flex justify-end h-100px">
              <a-button v-if="!isPaid"  @click="handleShowModal" class="bg-warning! color-white! w-200px h-60px mt-10 text-xl!"
                >立即支付</a-button
              >
              <a-button v-else  @click="$router.replace({ path: '/user/order' })" class="bg-warning! color-white! w-200px h-60px mt-10 text-xl!"
                >查看订单</a-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <a-modal v-model:visible="isTipsModal" @ok="handleTipsModalOk"  :ok-button-props="{ status: 'success' }">
    <template #title>
      <p class="text-xl"> 您确定支付吗？</p>
    </template>
    <div class="text-4 flex justify-center">
      <div class="lh-loose text-lg">
        <p class="flex  items-center ">
        <span class="w-120px text-left">您当前余额：</span>
        <div>
          <span class="text-warning">{{ userInfo.balance }}</span> 元
        </div>
      </p>
      <p class="flex gap-2 items-center">
        <span class="w-120px text-left">支付所需：</span>
        <div>
          <span class="text-warning">{{ query.total }}</span> 元
        </div>
      </p>
      <p class="flex gap-2 items-center">
        <span class="w-120px text-left">支付后剩余：</span>
        <div>
          <span class="text-warning">{{ userInfo.balance! - Number(query.total) }}</span> 元
        </div>
      </p>
      </div>
    </div>
  </a-modal>
</template>

